<template>
    <div class="loading-indicator"><span class="loader-dot"></span><span class="loader-dot"></span><span
            class="loader-dot"></span></div>
</template>

<script>
    export default {
        name: 'loading'
    }
</script>

<style lang="less">

    @-webkit-keyframes bouncedelay {
        0%, 80%, to {
            -webkit-transform: scale(0)
        }
        40% {
            -webkit-transform: scale(1)
        }
    }

    @keyframes bouncedelay {
        0%, 80%, to {
            transform: scale(0)
        }
        40% {
            transform: scale(1)
        }
    }

    .loading-indicator {
        margin: 10px auto;
        width: 70px;
        text-align: center;
        z-index: 9999;

        .loader-dot {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #a6a6a6;
            border-radius: 100%;
            -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
            animation: bouncedelay 1.4s infinite ease-in-out;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both
        }
        .loader-dot:nth-child(1) {
            -webkit-animation-delay: -.32s;
            animation-delay: -.32s
        }
        .loader-dot:nth-child(2) {
            -webkit-animation-delay: -.16s;
            animation-delay: -.16s
        }
    }
</style>
